今天目的

今天要傳資料給父祖件，所以就直接開始了。

Searchbar.js 組件

像this.props.xxx就可以傳給父祖件資料

import React,{Component} from 'react';

class Searchbar extends Component{
    constructor(props){
        super(props);//繼承props
        this.state = {
            search:'',
        };//內部自定義的變數
    }

    updateSearch = (e) => {
        console.log(e.target.value);
        
        this.setState({
            search:e.target.value
        })
        //這樣就可以傳資料給父祖件
        this.props.onsearh(e.target.value); //傳給父祖件onsearh事件
    }

    render(){
        const {updateSearch}=this;
            //   {search}=this.state;

        return (
        
            <div> 
                <input  placeholder="Search" 
                onChange={updateSearch} 
                type="text"/>                
            </div>
        );
    }
}
export default Searchbar;

App.js

從子組件接收資料，像以下。

import React from 'react';
import Searchbar from './Searchbar'
class App extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {

    };//內部自定義的變數
   

    
  }
  
  searhItem = (x) => { //拿到子組件的收尋文字
    console.log('子組件的收尋文字: ',x); //接收從子組件傳過來的值

  }


  render() {
    const {searhItem}=this;
    
    return(
      <div>
       <Searchbar  onsearh ={searhItem}/> {/* 從子組件 接收onsearh事件 */}
      </div>
    );
  }
}
export default App;

這樣就可以從子組件接收到值。

參考資料:
自己